<script setup lang="ts">
import { reactive, ref, computed, shallowRef } from 'vue';
import { useLargenScreen } from '@/composables/useLargenScreen';
// import mapChart from './components/mapChart.vue';
import areaSelect from './components/areaSelect.vue';
import icon1 from '@/assets/images/attractInvestment/icon_1.png';
import formPricker from '@/components/formPricker.vue';
import { useGetAreaJson } from '@/composables/getAreaJson';
import { zhaoshangIndex, zhaoshangSubmit } from '@/common/api/attractInvestment';
import { useToastLoading } from '@/composables/useToastLoading';
import { showSuccessToast } from 'vant';
import zsInfo from './components/zsInfo.vue';

const areaSelectRef = shallowRef<InstanceType<typeof areaSelect>>();

// 获取省市区json数据
const [areaPrickerOptions] = useGetAreaJson();

// 监听浏览器窗口变化
const [largenScreen] = useLargenScreen();

/**
 * 成为招商中心
 */

const form = reactive({
  xingming: '',
  sfzno: '',
  area: '',
  totalcnt: 0, // 区域总数
  readycnt: 0, // 已代理区域总数
  ifzhaoshang: 0, // 是否为招商中心 1 是 0 否
  province: '', // 省
  city: '', // 市
  price: 0, // 支付红包数
});
const loading = ref(false);
const subLoading = ref(false);
const isSm = ref(false); // 是否已经实名认证
const areaList = ref<{ district_name: string; uid: string }[]>([]); // 区域列表
const areaPickerColumns = computed(() =>
  areaList.value.map((v) => ({ text: v.district_name, value: v.district_name, disabled: !!v.uid }))
);

const onIndex = async () => {
  loading.value = true;
  try {
    const res = await zhaoshangIndex({ province: form.province, city: form.city });
    isSm.value = !!res.result.data.sfzno;
    Object.assign(form, res.result.data);
    areaList.value = res.result.list;
    form.area = '';
  } catch {
    /** empty */
  } finally {
    loading.value = false;
  }
};
onIndex();
useToastLoading(loading);

// 当前位置
const onCurrentPosition = () => {
  form.province = '';
  form.city = '';
  form.area = '';
  onIndex();
};

const onSubmit = async () => {
  subLoading.value = true;
  try {
    const res = await zhaoshangSubmit({ ...form });
    showSuccessToast(res.message);
    onIndex();
  } catch {
    /** empty */
  } finally {
    subLoading.value = false;
  }
  console.log(form);
};

const selectArea = (value: string) => {
  if (form.ifzhaoshang === 0) {
    form.area = value;
  }
};
</script>
<template>
  <div class="attractInvestment scroll-hidden flex flex-col" :class="{ boxShadow: largenScreen }">
    <template v-if="isSm">
      <div class="p-3">
        <areaSelect
          :model-value="[form.province, form.city]"
          ref="areaSelectRef"
          :columns="areaPrickerOptions"
          @on-confirm="
            (value) => {
              form.province = value[0].text;
              form.city = value[1].text;
              onIndex();
            }
          "
          @onCurrentPosition="onCurrentPosition"
        />
      </div>
      <div class="pb-2 px-3">
        <div class="flex justify-between items-center">
          <div class="text-sm font-medium">
            当前城市全部区域（<span class="text-[#ED347F]">{{ form.readycnt }} </span>/{{ form.totalcnt }}）
          </div>
          <div class="flex items-center text-xs">
            <van-icon name="user" color="#ED347F" size="14" />
            <span class="ml-1">已代理</span>
          </div>
        </div>
        <div class="flex flex-wrap pt-5">
          <div v-for="item in areaList" :key="item.district_name">
            <template v-if="item.uid">
              <div
                class="text-[13px] leading-8 rounded-2xl bg-[#FEF3F8] flex justify-center items-center px-4 mr-3 mb-3"
              >
                <van-icon name="user" color="#ED347F" size="14" />
                <span class="text-[#EC2D69]">{{ item.district_name }}</span>
              </div>
            </template>
            <template v-else>
              <div
                class="text-[13px] leading-8 rounded-2xl bg-[#F6F7F9] flex justify-center px-4 mr-3 mb-3"
                :class="{ 'checked-tag': form.area === item.district_name }"
                @click="selectArea(item.district_name)"
              >
                {{ item.district_name }}
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- 成为招商中心 -->
      <div class="bg-[#F6F6F6] flex-1 pt-4" v-if="form.ifzhaoshang === 0">
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <div class="font-medium text-sm pl-4 py-3">填写代理信息</div>
            <van-field
              v-model="form.xingming"
              name="xingming"
              label="姓名"
              placeholder="请输入姓名"
              :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field
              v-model="form.sfzno"
              name="sfzno"
              label="身份证"
              placeholder="请输入身份证号码"
              :rules="[{ required: true, message: '请填写身份证' }]"
            />
            <form-pricker v-model="form.area" label="服务区域" name="cert_validity_type" :columns="areaPickerColumns" />
            <div class="py-3"></div>
          </van-cell-group>
          <div class="m-4 px-4 py-4 flex items-center justify-between bg-white rounded-[10px]">
            <div class="flex items-center">
              <van-image width="15" height="18" :src="icon1" />
              <span class="text-sm ml-2">红包支付</span>
            </div>
            <div class="text-[#EC2D69] font-medium">{{ form.price }}</div>
          </div>
          <div class="m-4">
            <van-button round block type="primary" native-type="submit" color="#EC2D69" :loading="subLoading">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
      <!-- 招商中心统计数据 -->
      <template v-else>
        <zsInfo />
      </template>
    </template>
    <van-empty v-if="!loading && !isSm" image="error" description="请先实名认证" />
  </div>
</template>
<style lang="less" scoped>
.checked-tag {
  @apply !bg-[#ED347F] !text-white;
}
.attractInvestment {
  overflow-y: auto;
  height: 100vh;
  max-width: 450px;
}
.attractInvestment.boxShadow {
  margin: 3vh auto;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
</style>
